<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .username {
            position: absolute;
            left: 347px;
            top: 250px;
            border-radius: 5px;
            height: 24px;
        }

        button {
            background: transparent;
            outline: none;
            border: none;
            color: white;
        }

        .heroShow {
            width: 50px;
            height: 50px;
        }

        .sub {
            position: absolute;
            left: 351px;
            top: 288px;
            width: 126px;
            color: white;
            font-weight: bold;
            font-size: 18px;
        }



        .geme {
            position: relative;
        }

        .heroBtn {
            position: absolute;
            left: 45px;
            top: 8px;
            font-size: 14px;
        }

        .skinBtn {
            position: absolute;
            top: 8px;
            left: 105px;
            font-size: 14px;
        }

        .userView {
            position: absolute;
            /* width: 80px; */
            top: 34px;
            left: 720px;
        }

        .userView img {
            width: 40px;
            height: 40px;
        }

        .chioseusername {
            display: block;
            color: rgb(255, 215, 0);
            text-align: center;
            font-size: 12px;
            font-weight: bold;
        }

        .skillsView {
            position: absolute;
            display: flex;
            flex-direction: column;
            left: 660px;
            top: 200px;
        }

        .skillsView img {
            width: 40px;
            height: 40px;
            margin-bottom: 10px;
        }

        .heroView {
            width: 120px;
            position: absolute;
            margin-top: 40px;
            margin-left: 20px;
            display: flex;
            flex-wrap: wrap;
        }

        .skinView {
            width: 130px;
            position: absolute;
            margin-top: 40px;
            margin-left: 20px;
            display: flex;
            flex-wrap: wrap;
        }

        .heroView img {
            width: 50px;
            height: 50px;

        }

        .skinView img {
            width: 50px;
            height: 50px;
        }

        .heroItem {
            margin-left: 10px;
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            color: gray;
            align-items: center;
            font-size: 12px;
        }

        .skinItem {
            margin-left: 10px;
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            color: gray;
            align-items: center;
            font-size: 12px;
        }

        .skinShow {
            position: absolute;
            left: 320px;
            top: 40px;
        }

        .login {
            display: block;
        }

        .game {
            display: none;
        }

        .heroContainer {
            display: block;
        }

        .skinContainer {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 登录页面 -->
    <div class="login">
        <input class="username" /> <button class="sub">登录</button>
        <img src="./sources/login.JPG" alt="">
    </div>
    <!-- 游戏选择页面 -->
    <div class="game">
        <button class="heroBtn">英雄</button>
        <div class="heroContainer">
            <div class="heroView">
                <div class="heroItem">
                    <img src="./sources/heroes/yase1.png" />
                    <span>亚瑟</span>
                </div>
                <div class="heroItem">
                    <img src="./sources/heroes/yase1.png" />
                    <span>亚瑟</span>
                </div>
            </div>
        </div>

        <button class="skinBtn">皮肤</button>
        <div class="skinContainer">
            <div class="skinView">
                <!-- <div class="skinItem">
                    <img src="./sources/heroes/yase1.png" />
                    <span>经典</span>
                </div>
                <div class="skinItem">
                    <img src="./sources/heroes/yase2.png" />
                    <span>死亡骑士</span>
                </div> -->
            </div>
        </div>

        <div class="skinShow">
            <img src="./sources/skins/301660.png" alt="">
        </div>
        <div class="userView">
            <div class="heroShow">
                <!-- <img src="./sources/heroes/yase1.png" /> -->
            </div>
            <span class="chioseusername">张三</span>
        </div>

        <div class="skillsView">
            <img src="./sources/skills/11210.png" />
            <img src="./sources/skills/11220.png" />
            <img src="./sources/skills/11230.png" />
        </div>
        <div>

        </div>
        <img src="./sources/chiose.JPG" />
    </div>
  <script type="module">
    // 抽象 ：灵活 。
    // 分析对象 ---》 研究对象的属性和方法 （根据需求）----》 抽象成类 ---》研究类之间的逻辑关系
    /*  
        游戏类 ： {
            登录 ： {
                玩家player ：{
                    英雄：【
                        {
                            名称 
                            图像地址 
                                小图 
                                大图
                            技能 ： 【技能一 技能二 ...】
                            皮肤： 【皮肤一、皮肤二、皮肤三..】
                        },
                        {
                            名称
                                图像地址 
                                    小图
                                    大图
                                技能：【技能一，技能二】
                                皮肤： 【皮肤一、皮肤二、皮肤三..】
                        }
                    】 
                } 
            }
        }
    */
    // 装载游戏类 
    // 视图操作 在index.html里  dom操作 提取到一个文件  。views /templates ...
    import Game from './js/game.js';
    let game = new Game();

    let index = 0; // 默认选择 第一个英雄的索引值；
    // game.login("张三"); // 模拟登录
    // console.log(game);

    //一、 实现登录视图逻辑 
    let  subEle = document.querySelector(".sub");
    let loginEle = document.querySelector(".login");
    let gameEle = document.querySelector(".game");
    let usernameEle  = document.querySelector(".username");
    subEle.onclick = function(){
        // 隐藏登录页面 、显示 游戏页面
        loginEle.style.display =  "none";
        gameEle.style.display = "block";
        // 获取用户名  
        let username = usernameEle.value;
        game.login(username);  // 调取 游戏的登录方法；
        console.log(game);
        renderHeroes(game.player.heroes); // 调用渲染英雄方法 ；
    }


    // 根据游戏对象里的信息 渲染视图 
    // 渲染英雄 ；

    // 二、渲染英雄的方法
    let heroViewEle = document.querySelector(".heroView");
    function renderHeroes(heroes){
        // 清空容器；
        heroViewEle.innerHTML = "";
        heroes.forEach((hero,key)=>{
            let divEle = document.createElement("div");
            divEle.classList.add("heroItem");
            divEle.innerHTML = `
                    <img src="${hero.ico}">
                    <span>${hero.name}</span>`;
            heroViewEle.appendChild(divEle);
            /* 
            <div class="heroItem">
                    <img src="./sources/heroes/yase1.png">
                    <span>亚瑟</span>
                </div>
            */

            // 英雄视图 生成之后就绑定点击事件 
            divEle.onclick = function(){
                index = key;
                // 替换 用户选择的英雄图像 ；
                console.log(hero);  // 点击的英雄信息 ；
                // 替换用户图像；
                let heroShowEle = document.querySelector(".heroShow");
                heroShowEle.innerHTML = "";
                let userImg = document.createElement("img");
                userImg.src = hero.ico;
                heroShowEle.appendChild(userImg);

                // 替换中间的大图 
                let skinShowImgEle = document.querySelector(".skinShow img");
                skinShowImgEle.src = hero.img;

                // 渲染技能；
                renderSkills(hero.skills);
            }
        })
    }



    // 渲染技能的函数；
    function renderSkills(skills){
        var  skillsViewEle = document.querySelector(".skillsView");
        skillsViewEle.innerHTML = "";
        skills.forEach(skill=>{
            let imgEle  = document.createElement("img");
            imgEle.src = skill.ico;
            skillsViewEle.appendChild(imgEle);
        })
    }


    // 点击按钮 切换皮肤选择的 显示 
    let  heroButtonEle  =document.querySelector(".heroBtn");
    let skinButtonEle = document.querySelector(".skinBtn");


    let heroContainerEle = document.querySelector(".heroContainer");
    let skinContainerEle = document.querySelector(".skinContainer");
    // 点击 皮肤按钮的时候 切换 皮肤的选择；
    skinButtonEle.onclick = function(){
        // 显示 皮肤选择容器 ，隐藏 英雄选择容器 
        heroContainerEle.style.display = "none";
        skinContainerEle.style.display = "block";
        // 渲染皮肤对应的小图 ；
        console.log("渲染英雄对应的皮肤");
        renderSkins(game.player.heroes[index].skins);
    }

    heroButtonEle.onclick = function(){
        heroContainerEle.style.display = "block";
        skinContainerEle.style.display = "none";
    }



    // 渲染皮肤的函数 ；
    function renderSkins(skins){
        let skinViewEle = document.querySelector(".skinView");
        skinViewEle.innerHTML = "";
        skins.forEach(skin=>{
            let skinItemEle = document.createElement("div");
            skinItemEle.classList.add("skinItem");
            skinItemEle.innerHTML = `<img src="${skin.ico}" />
                        <span>${skin.name}</span>`;
             skinViewEle.appendChild(skinItemEle);
                /* 
                    <div class="skinItem">
                        <img src="./sources/heroes/yase1.png" />
                        <span>经典</span>
                    </div>
                */
                skinItemEle.onclick = function(){
                    console.log("点击了选择皮肤按钮",skin);
                    document.querySelector(".skinShow img").src = skin.img;
                }
        })
    }

  </script>
</body>

</html>